<template>
  <!-- 最大容器 -->
  <div class="Bigbox">
    <!-- X图片容器 -->
    <div class="closeBox">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- new图标容器 -->
    <div class="newBox">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 用户输入框容器 -->
    <div class="inputBox">
      <!-- 父传子：1.textPlaceholder：提示信息  2.type：输入框类型    3.rule：正则表达式  4.err_msg:失败提示信息 -->
      <inputs
        textPlaceholder="用户名/手机号码"
        type="text"
        :rule="ruleUserName"
        err_msg="请输入正确的账号/手机号码"
        @valChange="setUserName"
      ></inputs>
    </div>
    <!-- 密码输入容器 -->
    <div class="inputBox">
      <inputs
        textPlaceholder="密码"
        type="password"
        :rule="rulePassWord"
        err_msg="请输入的正确密码"
        @valChange="setPassWord"
      ></inputs>
    </div>

    <!-- 登录 -->
    <div class="bntBox">
      <buttons btnText="登录" @clicked="sendLogin"></buttons>
    </div>
  </div>
</template>
 
<script>
import inputs from "../components/inputbox";
import buttons from "../components/buttonbox";
export default {
  components: {
    inputs: inputs,
    buttons: buttons
  },
  //数据
  data() {
    return {
      userName: "",
      passWord: "",
      ruleUserName: "^\\d{5,11}$",
      rulePassWord: "^.{3,9}$"
    };
  },
  //方法
  methods: {
    //子传父之后，执行的父组件函数
    sendLogin() {
      console.log(this.userName);
      console.log(this.passWord);

      //这里发送请求，但是发送请求前，需要先校验数据的正确性
      //如果只校验是不是空的，比较简单
      if (this.userName == "" || this.passWord == "") {
        this.$toast.fail("用户名和密码不能为空");
        //弹窗以后阻止继续操作，return结束
        return;
      }

      //校验用户名
      var regExpUserName = new RegExp(this.ruleUserName);
      if (!regExpUserName.test(this.userName)) {
        this.$toast.fail("用户名格式错误");
        return;
      }

      //校验密码
      var regExpPassWord = new RegExp(this.rulePassWord);
      if (!regExpPassWord.test(this.passWord)) {
        this.$toast.fail("密码格式错误");
        return;
      }

      console.log("密码的正则");
      // console.log(regExpPassWord);
      // console.log(ruleUserName);

      //真正发送请求登录
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.userName,
          password: this.passWord
        }
      }).then(res => {
        //结构出res.data里面的msg和data
        let { message, data } = res.data;
        console.log(res.data);

        // console.log(message);
        // console.log(data.token);

        //如果请求的message是登录成功，则轻弹框返回信息给客户
        if (message == "登录成功") {
          console.log(message);
          //登录成功，存储token和用户id
          localStorage.setItem("token", data.token);
          localStorage.setItem("userId", data.user.id);

          this.$toast.success(message);

          //登录成功，跳转到个人中心
          setTimeout(() => {
            this.$router.replace("/personal");
          }, 800);
        }
        // 当请求的message是登录失败等其他信息，则返回失败的轻弹框
        else {
          console.log("失败：" + message);
          this.$toast.fail(message);
        }
      });
    },
    //父组件·用户名数据存储
    setUserName(username) {
      this.userName = username;
    },
    //父组件·密码数据存储
    setPassWord(password) {
      this.passWord = password;
    }
  }
};
</script>

<style lang="less" scoped>
/* 样式初始化 */
* {
  padding: 0;
  margin: 0;
}
a {
  font-size: 20px;
  color: darkseagreen;
}
a:hover {
  color: deeppink;
  text-decoration: none;
}
ol,
ul,
li {
  list-style: none;
}
/* 最大容器 */
.Bigbox {
  box-sizing: border-box;
  width: 100vw;
  height: 176.389vw;
  background-color: #fff;
}
/* X图标样式 */
.closeBox {
  padding-top: 8.333vw;
  .iconicon-test {
    margin: 5.556vw;
    font-size: 7.778vw;
    color: rgb(121, 121, 121);
  }
}

/* new图标样式 */
.newBox {
  text-align: center;
  .iconnew {
    font-size: 35vw;
    color: cadetblue;
  }
}
/* 输入框盒子 */
.inputBox {
  margin: 2.778vw;
  padding: 0 3.333vw;
  height: 13.889vw;
  line-height: 13.889vw;
  text-align: center;
  input {
    font-size: 4.444vw;
    padding-bottom: 2.778vw;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
  }
}
/* 按钮盒子 */
.bntBox {
  margin-top: 13.889vw;
  padding: 0 3.333vw;
  text-align: center;
  button {
    font-weight: 700;
    font-size: 4.444vw;
    color: darkslategrey;
    height: 12.778vw;
    width: 100%;
    background: cadetblue;
    border-radius: 6.389vw;
  }
}
</style>
